import { Loading } from "@/components/loading";
import { useTheme } from "@/hooks/useTheme";
import routes from "@/routes";
import { App as AppProvider, ConfigProvider } from "antd";
import { Suspense, memo } from "react";
import { RouterProvider, createBrowserRouter } from "react-router-dom";

export const App = memo(() => {
  const theme = useTheme();

  return (
    <ConfigProvider theme={theme}>
      <AppProvider>
        <Suspense fallback={<Loading />}>
          <RouterProvider
            router={createBrowserRouter(routes)}
            fallbackElement={<p>Loading...</p>}
          />
        </Suspense>
      </AppProvider>
    </ConfigProvider>
  );
});
export default App;
